<template>
	<!--企业数据交易账户-->
	<view class="padding-bottom-lg">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">
				<view class="custom-title">企业数据交易账户</view>
			</block>
		</cu-custom>
		<view class="progress1 padding-top-32">
			<view class="progress-circle-1">
				<view class="complate-content">
					<image src="https://txr001.zthj.net/static/img/complate.png" class="img-40"></image>
				</view>
				<text class="progress-text">基本信息</text>
			</view>
			<view class="progress-line1"></view>
			<view class="progress-circle-gray">
				<view class="complate-content">
					<image src="https://txr001.zthj.net/static/img/complate.png" class="img-40"></image>
				</view>
				<text class="progress-text">申请代表</text>
			</view>
			<view class="progress-line1"></view>
			<view class="progress-circle-gray">
				<view class="complate-content">
					<image src="https://txr001.zthj.net/static/img/complate.png" class="img-40"></image>
				</view>
				<text class="progress-text">确认代表</text>
			</view>
			<view class="progress-line1"></view>
			<view class="progress-circle-gray">
				<view class="complate-content">
					<view class="uncomplate-content"></view>
				</view>
				<text class="progress-text">附件上传</text>
			</view>
			<view class="progress-line1"></view>
			<view class="progress-circle-gray">
				<text class="progress-circle-number">5</text>
				<text class="progress-text">附件寄送</text>
			</view>
		</view>
		<view class="margin-32 padding-32 bg-white radius-48">
			<view class="flex justify-between align-center" @click="download('https://txr001.zthj.net/qdqd/qy.rar')">
				<view class="download-class">下载全部附件</view>
			</view>
			<view class="file-content">
				<view class="flex justify-start align-center padding-bottom-12">
					<image src="https://txr001.zthj.net/static/khxz.png" class="basic-title-img"></image>
					<text class="padding-left-xs file-content-text">代表授权书</text>
				</view>
				<view class="flex justify-start align-center padding-bottom-12">
					<image src="https://txr001.zthj.net/static/khxz.png" class="basic-title-img"></image>
					<text class="padding-left-xs file-content-text">数商会员承诺书</text>
				</view>
				<view class="flex justify-start align-center padding-bottom-12">
					<image src="https://txr001.zthj.net/static/khxz.png" class="basic-title-img"></image>
					<text class="padding-left-xs file-content-text">江苏无锡大数据交易公司数商会员申请表</text>
				</view>
				<view class="flex justify-start align-center">
					<image src="https://txr001.zthj.net/static/khxz.png" class="basic-title-img"></image>
					<text class="padding-left-xs file-content-text">碳普惠自愿减排数据交易账户开户申请表</text>
				</view>
			</view>
			<!--银行开户证明复印件-->
			<view class="basic-update-title padding-top-48 flex justify-between align-center">
				<view class="text-bold">银行开户证明复印件：</view>
			</view>
			<view @click="ChooseImage(2)" class="yyzz-content flex align-center justify-center">
				<view class="yhkh flex align-center justify-center" :style="{backgroundImage:`url(${form.kaihu})`}">
					<view class="camera-content flex align-center justify-center">
						<image src="https://txr001.zthj.net/static/camera.png" class="camara-img"></image>
					</view>
				</view>
			</view>
			<view class="padding-top-32 update-info">
				注:1.请上传银行开户证明复印件，JPG或PNG格式，大小不超过
				<view class="padding-left">5MB，拍摄时确保内容完整,字体清晰,亮度均匀；</view>
				<view class="padding-left">2.银行开户证明复印件必须加盖企业公章。</view>
			</view>
			<!--法人代表-->
			<view class="basic-update-title padding-top-48 flex justify-between align-center">
				<view class="text-bold">法人代表身份证明复印件：</view>
			</view>
			<view @click="ChooseImage(3)" class="yyzz-content flex align-center justify-center">
				<view class="frdb flex align-center justify-center"
					:style="{backgroundImage:`url(${form.leader_shenfen_img})`}">
					<view class="camera-content flex align-center justify-center">
						<image src="https://txr001.zthj.net/static/camera.png" class="camara-img"></image>
					</view>
				</view>
			</view>
			<view class="padding-top-32 update-info">
				注:1.法人代表身份证明复印件必须加盖企业公章；
				<view class="padding-left">2.JPG或PNG格式，大小不超过5MB，拍摄时确保内容完整,字</view>
				<view class="padding-left">体清晰,亮度均匀。</view>
			</view>

			<!--账户代表授权书原件（签字盖章）：-->
			<view class="basic-update-title padding-top-48 flex justify-between align-center">
				<view class="text-bold">账户代表授权书原件（签字盖章）：</view>
				<view @click="download('https://txr001.zthj.net/qdqd/1.pdf')">
					<image src="https://txr001.zthj.net/static/khxz.png" class="basic-title-img"></image>
					<text class="wtsqs-class" style="color:#24458E">代表授权书</text>
				</view>
			</view>
			<view @click="ChooseImage(4)" class="yyzz-content flex align-center justify-center">
				<view class="sqs flex align-center justify-center"
					:style="{backgroundImage:`url(${form.db_shouquanshu})`}">
					<view class="camera-content flex align-center justify-center">
						<image src="https://txr001.zthj.net/static/camera.png" class="camara-img"></image>
					</view>
				</view>
			</view>
			<view class="padding-top-32 update-info">
				注:1.请下载账户代表授权书原件根据要求填写然后加盖公章签字;
				<view class="padding-left">2.JPG或PNG格式，大小不超过5MB，拍摄时确保内容完整,字</view>
				<view class="padding-left">体清晰,亮度均匀；</view>
			</view>



			<!--数商会员承诺书-->
			<view class="basic-update-title padding-top-48 flex justify-between align-center">
				<view class="text-bold">数商会员承诺书：</view>
				<view @click="download('https://txr001.zthj.net/qdqd/2.pdf')">
					<image src="https://txr001.zthj.net/static/khxz.png" class="basic-title-img"></image>
					<text class="wtsqs-class" style="color:#24458E">数商会员承诺书</text>
				</view>
			</view>
			<view @click="ChooseImage(6)" class="yyzz-content flex align-center justify-center">
				<view class="zhdb flex align-center justify-center"
					:style="{backgroundImage:`url(${form.chengnuoshu})`}">
					<view class="camera-content flex align-center justify-center">
						<image src="https://txr001.zthj.net/static/camera.png" class="camara-img"></image>
					</view>
				</view>
			</view>
			<view class="padding-top-32 update-info">
				注:1.请下载数商会员承诺书根据要求填写然后加盖公章；
				<view class="padding-left">2.JPG或PNG格式，大小不超过5MB，拍摄时确保内容完整,字</view>
				<view class="padding-left">体清晰,亮度均匀；</view>
			</view>


			<!--江苏无锡大数据交易公司数商会员申请表-->
			<view class="basic-update-title padding-top-48">
				<view class="text-bold">江苏无锡大数据交易公司数商会员申请表：</view>
				<view @click="download('https://txr001.zthj.net/qdqd/3.pdf')" class="padding-top-24">
					<image src="https://txr001.zthj.net/static/khxz.png" class="basic-title-img"></image>
					<text class="wtsqs-class" style="color: #24458E;">江苏无锡大数据交易公司数商会员申请表</text>
				</view>
			</view>

			<view @click="ChooseImage(7)" class="yyzz-content flex align-center justify-center">
				<view class="sqs-five flex align-center justify-center"
					:style="{backgroundImage:`url(${form.shenqingbiao})`}">
					<view class="camera-content flex align-center justify-center">
						<image src="https://txr001.zthj.net/static/camera.png" class="camara-img"></image>
					</view>
				</view>
			</view>
			<view class="padding-top-32 update-info">
				注:1.请下载江苏无锡大数据交易公司数商会员申请表根据要求填
				<view class="padding-left">写然后加盖公章；</view>
				<view class="padding-left">2.JPG或PNG格式，大小不超过5MB，拍摄时确保内容完整,字</view>
				<view class="padding-left">体清晰,亮度均匀；</view>
			</view>

			<!--碳普惠自愿减排数据交易账户开户申请表：-->
			<view class="basic-update-title padding-top-48">
				<view class="text-bold">碳普惠自愿减排数据交易账户开户申请表：</view>
				<view @click="download('https://txr001.zthj.net/qdqd/qy.pdf')" class="padding-top-24">
					<image src="https://txr001.zthj.net/static/khxz.png" class="basic-title-img"></image>
					<text class="wtsqs-class" style="color: #24458E;">碳普惠自愿减排数据交易账户开户申请表</text>
				</view>

			</view>
			<view @click="ChooseImage(8)" class="yyzz-content flex align-center justify-center">
				<view class="sqs-five flex align-center justify-center"
					:style="{backgroundImage:`url(${form.kaihushenqing})`}">
					<view class="camera-content flex align-center justify-center">
						<image src="https://txr001.zthj.net/static/camera.png" class="camara-img"></image>
					</view>
				</view>
			</view>
			<view class="padding-top-32 update-info">
				注:1.请下载碳普惠自愿减排数据交易账户开户申请表根据要求填
				<view class="padding-left">写然后加盖公章；</view>
				<view class="padding-left">2.JPG或PNG格式，大小不超过5MB，拍摄时确保内容完整,字</view>
				<view class="padding-left">体清晰,亮度均匀；</view>
			</view>


			<view class="padding flex flex-wrap justify-center align-center">
				<button class="cu-btn round submit-btn" @click="toNext">下一步</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					kaihu: 'https://txr001.zthj.net/static/yhkj.png',
					leader_shenfen_img: 'https://txr001.zthj.net/static/frdb.png',
					db_shouquanshu: 'https://txr001.zthj.net/static/sqs.png',
					chengnuoshu: 'https://txr001.zthj.net/static/sqs-five.png',
					shenqingbiao: 'https://txr001.zthj.net/static/sqs-five.png',
					kaihushenqing: 'https://txr001.zthj.net/static/sqs-five.png',
					id: 0
				}
				// zhizhaofuben: 'https://txr001.zthj.net/yyzz.png',

			}
		},
		onLoad() {
			this.getInfo();
		},
		methods: {
			getInfo: async function(id) {
				let res = await this.$api.jiaoyiInfo();
				this.form.kaihu = res.kaihu ? res.kaihu : 'https://txr001.zthj.net/static/yhkj.png';
				this.form.leader_shenfen_img = res.leader_shenfen_img ? res.leader_shenfen_img :
					'https://txr001.zthj.net/static/frdb.png';
				this.form.db_shouquanshu = res.db_shouquanshu ? res.db_shouquanshu :
					'https://txr001.zthj.net/static/sqs.png';
				this.form.chengnuoshu = res.chengnuoshu ? res.chengnuoshu :
					'https://txr001.zthj.net/static/sqs-five.png';
				this.form.shenqingbiao = res.shenqingbiao ? res.shenqingbiao :
					'https://txr001.zthj.net/static/sqs-five.png';
				this.form.kaihushenqing = res.kaihushenqing ? res.kaihushenqing :
					'https://txr001.zthj.net/static/sqs-five.png';
				this.form.id = res.id;
			},
			ChooseImage(type) {
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log();
						that.postImg(res.tempFilePaths[0], type)
					}
				});
			},
			postImg(imgFilePaths, type) {
				uni.uploadFile({
					url: 'https://qd.zthj.net/api/Common/upload',
					filePath: imgFilePaths,
					name: 'file',
					success: (res) => {
						let info = JSON.parse(res.data)
						// console.log(res.data);
						if (type == 2) {
							this.form.kaihu = info.data.fullurl;
						} else if (type == 3) {
							this.form.leader_shenfen_img = info.data.fullurl;
						} else if (type == 4) {
							this.form.db_shouquanshu = info.data.fullurl;
						} else if (type == 6) {
							this.form.chengnuoshu = info.data.fullurl;
						} else if (type == 7) {
							this.form.shenqingbiao = info.data.fullurl;
						} else {
							this.form.kaihushenqing = info.data.fullurl;
						}
					}
				});
			},
			async toNext() {

				if (this.form.kaihu == 'https://txr001.zthj.net/static/yhkj.png') {
					uni.showToast({
						title: '请上传银行开户证明复印件！',
						icon: 'none'
					});
					return;
				}
				if (this.form.leader_shenfen_img == 'https://txr001.zthj.net/static/frdb.png') {
					uni.showToast({
						title: '请上传法人代表身份证明复印件！',
						icon: 'none'
					});
					return;
				}
				if (this.form.db_shouquanshu == 'https://txr001.zthj.net/static/sqs.png') {
					uni.showToast({
						title: '请上传账户代表授权书原件（签字盖章）！',
						icon: 'none'
					});
					return;
				}


				if (this.form.chengnuoshu == 'https://txr001.zthj.net/static/sqs-five.png') {
					uni.showToast({
						title: '请上传数商会员承诺书！',
						icon: 'none'
					});
					return;
				}

				if (this.form.shenqingbiao == 'https://txr001.zthj.net/static/sqs-five.png') {
					uni.showToast({
						title: '请上传数商会员申请表！',
						icon: 'none'
					});
					return;
				}

				if (this.form.kaihushenqing == 'https://txr001.zthj.net/static/sqs-five.png') {
					uni.showToast({
						title: '请上传碳普惠自愿减排数据交易账户开户申请表！',
						icon: 'none'
					});
					return;
				}

				let res = await this.$api.updateJiaoyi(this.form);
				if (res.code == 1) {
					this.form.id = res.data.renzheng_id;
					uni.navigateTo({
						url: "/subpackage/pages/mine/company/trafficAccountFive?id=" + this.form.id
					})
				} else {
					uni.showToast({
						title: '提交失败！',
						icon: 'none'
					})
				}
			},
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			download(url) {
				window.open(url);
			},

		}
	}
</script>

<style scoped>
	.progress1 .progress-line1 {
		width: 72rpx;
	}
</style>